<template>
  <el-drawer
    :wrapper-closable="false"
    title="分配权限"
    :size="500"
    :visible.sync="innerValue"
    @open="onDrawerOpen"
    @closed="onDrawerClosed"
  >
    <div class="relative flex h-full flex-col space-y-[24px] p-[16px] pt-0">
      <div class="flex min-h-0 flex-1 flex-col space-y-[24px] overflow-y-auto">
        <div>
          <div class="common-secondary-bg">
            <div class="common-secondary-title"></div>
            角色权限
          </div>
          <div class="bg-gray-50 p-[16px]">
            <el-checkbox
              v-model="checkRolesAll"
              :indeterminate="isRolesIndeterminate"
              @change="handleCheckAllRolesChange"
              ><span class="font-bold text-[#363F51]">全选</span>
            </el-checkbox>
            <el-checkbox-group v-model="checkedRoles" class="flex flex-col" @change="handleCheckedRolesChange">
              <el-checkbox v-for="(item, index) in roles" :key="index" :label="item.code" class="mt-[16px]">{{
                item.name
              }}</el-checkbox>
            </el-checkbox-group>
          </div>
          <!-- SCP203暂时隐藏数据权限 -->
          <div v-if="false">
            <div>数据权限</div>
            <div class="flex items-center justify-between bg-gray-50 p-[40px]">
              <!-- left start -->
              <div style="width: 49%">
                <div class="mb-[5px] flex justify-between">
                  <div>未添加车场</div>
                  <el-input
                    v-model.trim="parkNameNo"
                    size="mini"
                    placeholder="请输入内容"
                    class="w-[200px]"
                    clearable
                    @keydown.enter.native="getDataListNotAdd"
                    @clear="getDataListNotAdd"
                  ></el-input>
                </div>
                <el-table
                  ref="multipleLeftTable"
                  height="300px"
                  style="overflow: auto"
                  size="mini"
                  border
                  :data="tableNotAddData"
                  row-key="id"
                  reserve-selection
                  @selection-change="handleLeftSelectionChange"
                >
                  <el-table-column type="selection" width="40" center></el-table-column>
                  <el-table-column :prop="PROPS.parkingName" :label="LABELS.parkingName" />
                  <el-table-column :prop="PROPS.property" :label="LABELS.property" />
                </el-table>
                <el-pagination
                  :current-page="paginationNotAdd.page"
                  :total="paginationNotAdd.total"
                  :page-size="paginationNotAdd.size"
                  :page-sizes="paginationNotAdd.sizes"
                  :layout="paginationNotAdd.layout"
                  :hide-on-single-page="false"
                  class="pt-[20px]"
                  background
                  :pager-count="5"
                  small
                  @size-change="onSizeChangeNotAdd"
                  @current-change="onCurrentChangeNotAdd"
                />
              </div>
              <!-- left end -->
              <div class="flex w-[100px] justify-around">
                <div class="cursor-pointer" @click="increaseTo">右</div>
                <div class="cursor-pointer" @click="notAddedTo">左</div>
              </div>
              <!-- right start -->
              <div style="width: 49%">
                <div class="mb-[5px] flex justify-between">
                  <span class>已添加车场</span>
                  <el-input
                    v-model.trim="parkName"
                    size="mini"
                    placeholder="请输入内容"
                    class="w-[200px]"
                    clearable
                    @keydown.enter.native="getDataListAdd"
                    @clear="getDataListAdd"
                  ></el-input>
                </div>
                <el-table
                  ref="multipleRightTable"
                  height="300px"
                  style="overflow: auto"
                  size="mini"
                  border
                  row-key="id"
                  :data="tableAddData"
                  reserve-selection
                  @selection-change="handleRightSelectionChange"
                >
                  <el-table-column type="selection" width="40" center></el-table-column>
                  <el-table-column :prop="PROPS.parkingName" :label="LABELS.parkingName" />
                  <el-table-column :prop="PROPS.property" :label="LABELS.property" />
                </el-table>
                <el-pagination
                  :current-page="paginationAdd.page"
                  :total="paginationAdd.total"
                  :pager-count="5"
                  small
                  :page-size="paginationAdd.size"
                  :page-sizes="paginationAdd.sizes"
                  :layout="paginationAdd.layout"
                  :hide-on-single-page="false"
                  class="pt-[20px]"
                  background
                  @size-change="onSizeChangeAdd"
                  @current-change="onCurrentChangeAdd"
                />
              </div>
              <!-- right end -->
            </div>
          </div>
        </div>
      </div>
      <footer class="common-drawer-footer">
        <t-button class="common-search-btn" type="primary" @click="onSubmit">提 交</t-button>
        <t-button class="common-search-btn" type="default" plain @click="innerValue = false">关 闭</t-button>
      </footer>
    </div>
  </el-drawer>
</template>

<script>
import paginationMixinAdd from "../mixin/paginationAdd";
import paginationMixinNotAdd from "../mixin/paginationNotAdd";
import config from "./config";
import vModelMixin from "@/mixin/v-model";
import { systemRoleAll } from "@/api/role";
import { systemUserAssignRole, systemUserDetail } from "@/api/user";

export default {
  name: "AssignPermissions",
  components: {},
  mixins: [vModelMixin, paginationMixinAdd, paginationMixinNotAdd],
  props: {
    id: {
      type: [String, Number],
      required: true,
    },
    username: {
      type: [String, Number],
      required: true,
    },

    parentId: {
      type: [String, Number],
      default: null,
    },
    nodeId: {
      type: [String, Number],
      default: null,
    },
    multipleSelection: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      ...config,
      isRolesIndeterminate: false,
      checkRolesAll: false,
      checkedRoles: [],
      roles: ["角色A", "角色B", "角色C", "角色D", "角色E"],
      parkNameNo: "",
      parkName: "",
      tableNotAddDataClone: [],
      tableNotAddData: [],
      tableAddDataClone: [],
      tableAddData: [],
      increaseListSelection: [], //未添加表格选择内容
      notAddedListSelection: [], //已添加表格选择内容
      increaseList: [], //未添加-》添加的停车场列表
      notAddedList: [], //已添加-》未添加的停车场列表
    };
  },
  computed: {},
  methods: {
    // getDataListAdd(param) {
    //   return new Promise((resolve) => {
    //     const params = { ...this.getParamsAdd(param), userId: this.id, parkName: this.parkName };
    //     getParkListUser(params).then((res) => {
    //       this.tableAddData = res.content || [];
    //       this.tableAddDataClone = clone(res.content || []);
    //       this.paginationAdd.total = res.totalElements || 0;
    //       resolve();
    //     });
    //   });
    // },
    // getDataListNotAdd(param) {
    //   return new Promise((resolve) => {
    //     const params = { ...this.getParamsNotAdd(param), userId: this.id, parkName: this.parkNameNo };
    //     getParkListUserRemain(params).then((res) => {
    //       this.tableNotAddData = res.content || [];
    //       this.tableNotAddDataClone = clone(res.content || []);
    //       this.paginationNotAdd.total = res.totalElements || 0;
    //       resolve();
    //     });
    //   });
    // },
    async getTenantRoleAlls() {
      const params = {
        tenantId: this.nodeId,
      };
      this.roles = await systemRoleAll(params);
    },
    async getCheckRoleAlls() {
      const { roles } = await systemUserDetail({ id: this.id });
      this.checkedRoles = roles.map((item) => item.code);
      if (this.checkedRoles.length) {
        this.isRolesIndeterminate = true;
      } else {
        this.isRolesIndeterminate = false;
      }
    },
    async onDrawerOpen() {
      this.increaseList = [];
      this.notAddedList = [];
      if (this.id) {
        // this.getDataListNotAdd();
        // this.getDataListAdd();
        this.getTenantRoleAlls();
        this.getCheckRoleAlls();
      }
    },
    handleCheckAllRolesChange(val) {
      this.checkedRoles = val ? this.roles.map((item) => item.code) : [];
      this.isRolesIndeterminate = false;
    },
    handleCheckedRolesChange(value) {
      const checkedRolesCount = value.length;
      this.checkRolesAll = checkedRolesCount === this.roles.length;
      this.isRolesIndeterminate = checkedRolesCount > 0 && checkedRolesCount < this.roles.length;
    },
    handleLeftSelectionChange(val) {
      this.increaseListSelection = val;
    },
    handleRightSelectionChange(val) {
      this.notAddedListSelection = val;
    },
    increaseTo() {
      if (this.increaseListSelection.length) {
        this.increaseList = this.increaseList.concat([...this.increaseListSelection]);
        this.resetTable();
      } else {
        this.$message.warning("请先勾选数据");
      }
    },
    notAddedTo() {
      if (this.notAddedListSelection.length) {
        this.notAddedList = this.notAddedList.concat([...this.notAddedListSelection]);
        this.resetTable();
      } else {
        this.$message.warning("请先勾选数据");
      }
    },
    //重置表格
    resetTable() {
      if (this.increaseListSelection.length) {
        this.tableNotAddData = this.tableNotAddData.filter((item) => {
          return !this.increaseListSelection.find((prop) => {
            return prop[this.PROPS.parkingName] == item[this.PROPS.parkingName];
          });
        });
        this.tableAddData = this.tableAddData.concat([...this.increaseListSelection]);
        this.paginationAdd.total += this.increaseListSelection.length;
        this.paginationNotAdd.total -= this.increaseListSelection.length;
      } else if (this.notAddedListSelection.length) {
        this.tableAddData = this.tableAddData.filter((item) => {
          return !this.notAddedListSelection.find((prop) => {
            return prop[this.PROPS.parkingName] == item[this.PROPS.parkingName];
          });
        });
        this.tableNotAddData = this.tableNotAddData.concat([...this.notAddedListSelection]);
        this.paginationAdd.total -= this.notAddedListSelection.length;
        this.paginationNotAdd.total += this.notAddedListSelection.length;
      }
    },
    async onSubmit() {
      //发送事件
      const params = {
        departId: this.parentId ? this.parentId : this.nodeId,
        username: [this.username],
        roleCode: this.checkedRoles,
      };
      await systemUserAssignRole(params);
      // const addedIds = this.tableAddDataClone.map((item) => item.id);
      // const added = this.tableAddData.filter((item) => !addedIds.includes(item.id)).map((item) => item.parkCode);
      // const deletedIds = this.tableNotAddDataClone.map((item) => item.id);
      // const deleted = this.tableNotAddData.filter((item) => !deletedIds.includes(item.id)).map((item) => item.parkCode);
      // const paramsList = {
      //   added,
      //   deleted,
      //   departCode: this.parentId ? this.parentId : this.nodeId,
      //   username: this.username,
      // };
      // await getParkAssignUser(paramsList);
      this.$emit("onSubmitRole");
    },
    onDrawerClosed() {},
  },
};
</script>

<style lang="scss" scoped></style>
